<template>
  <div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column fixed prop="name" label="商品图片" width="250" align="center">
        <template slot-scope="scope">
          <img :src="'/img' + scope.row.product.imgLink" alt="商品图片" style="width: 50px; height: 50px;">
        </template>
      </el-table-column>
      <el-table-column prop="product.name" label="商品名称" width="250" align="center" ></el-table-column>
      <el-table-column prop="typeId" label="类型" width="120" align="center">
        <template slot-scope="scope">
          {{conversionType(scope.row.product.typeId)}}
        </template>
      </el-table-column>
      <el-table-column prop="product.price" label="市场价格" width="120" align="center"></el-table-column>
      <el-table-column prop="product.unit" label="单位" width="120" align="center"></el-table-column>
      <el-table-column prop="price" label="我的出价" width="120" align="center"></el-table-column>
      <el-table-column fixed="right" label="操作" align="center">
        <template slot-scope="scope">
          <el-button @click="revoke(scope.row)" type="primary" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    <el-dialog title="我的叫价" :visible.sync="dialogFormVisible" width="30%" @close="dialogClose">
     <el-descriptions class="margin-top"  :column="1" size="medium" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            商品名称
          </template>
          {{row.product.name}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            市场价格
          </template>
          {{row.product.price}}
        </el-descriptions-item>
        <!-- 输入叫价-->
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            我的叫价
          </template>
          <el-form :rules="askingPriceRules" ref="askingPriceRules" :model="askingPriceFrom" label-width="80px" class="demo-ruleForm">
            <el-form-item label="叫价" prop="askingPrice">
              <el-input v-model="askingPriceFrom.askingPrice" placeholder="请输入你的叫价"></el-input>
            </el-form-item>
          </el-form>
        </el-descriptions-item>
      </el-descriptions>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" >取 消</el-button>
        <el-button type="danger" @click="removeById">撤销叫价</el-button>
        <el-button type="primary" @click="askingPriceSubmit('askingPriceRules')">确 定修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'MyAskingPrice',
  components: {},
  props: {},
  data () {
    return {
      supplier:'',
      tableData: [],
      currentPage : 1,
      total : 0,
      pageSize : 5,
      product:{},
      dialogFormVisible : false,
      types:[],
      Types:[],
      row:{id:'', product: {name:'',price:''}},
      askingPriceFrom:{
        askingPrice: ''
      },
      askingPriceRules: {
        askingPrice: [
          { required: true, message: '请输入价格', trigger: 'blur' },
          { pattern: /^[1-9]\d*(\.\d+)?$/, message: '请输入有效的价格', trigger: 'blur' }
        ]
      },
    }
  },
  // 计算属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    handleSizeChange(val) {//页大小改变时
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.InitializeThePage();
    },
    handleCurrentChange(val) {//页码发生改变时
      // console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.InitializeThePage();
    },
    InitializeThePage(){
      let formData = new FormData();
      formData.append('supplierId', this.supplier.supplierId);
      formData.append('currentPage', this.currentPage);
      formData.append('pageSize', this.pageSize);
      this.$axios.post("http://localhost:8090/supplier-product/getSupplierProductBySupplierId", formData).then(({ data }) => {
        this.tableData = data.records;
        this.total = data.total;
      }).catch(() => {
        this.$message({
          type: 'error',
          message: '初始化失败!'
        });
      });
    },
    initSupplier(){
      this.supplier = this.$store.state.supplier
    },
    revoke(row){
      this.row = row;
      this.askingPriceFrom.askingPrice = row.price
      this.dialogFormVisible = true;
      console.log(this.row)
    },
    initialTypeSelect: function () {
      this.$axios.get("http://localhost:8090/product-type/getAllProductType?level="+2).then(({ data }) => {
        this.types = data;
      })
      this.$axios.get("http://localhost:8090/product-type/getAllProductType").then(({ data }) => {
        this.Types = data;
      })
    },
    conversionType(typeId){
      let type = typeId.split('-')[1]
      for(let i=0;i<this.Types.length;i++){
        if(this.Types[i].typeId==type){
          return this.Types[i].typeName
        }
      }
    },
    dialogClose(){
      this.dialogFormVisible = false;
    },
    askingPriceSubmit(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let formData = new FormData();
          formData.append('id', this.row.id);
          formData.append('price', this.askingPriceFrom.askingPrice);
          this.$axios.post("http://localhost:8090/supplier-product/UpdateSupplierProduct", formData).then(({ data }) => {
            // eslint-disable-next-line no-empty
            if(data){
              this.$notify({
                title: '编辑',
                message: '修改成功！',
                type: 'success'
              });
              this.dialogFormVisible = false
              this.InitializeThePage();
              // eslint-disable-next-line no-empty
            }else {
              this.$notify({
                title: '编辑',
                message: '编辑失败！',
                type: 'warning'
              });
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      })
    },
    removeById(){
      let formData = new FormData();
      formData.append('id', this.row.id);
      this.$axios.post("http://localhost:8090/supplier-product/removeSupplierProductById", formData).then(({ data }) => {
        if(data){
          this.$notify({
            title: '删除',
            message: '删除成功！',
            type: 'success'
          });
          this.dialogFormVisible = false
          this.InitializeThePage();
        }else {
          this.$notify({
            title: '删除',
            message: '删除失败！',
            type: 'warning'
          });
        }
      })
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.initSupplier();
    this.initialTypeSelect();
    this.InitializeThePage();
  },
  // 生命周期 - 创建之前
  beforeCreate () {},
  // 生命周期 - 挂载之前
  beforeMount () {},
  // 生命周期 - 更新之前
  beforeUpdate () {},
  // 生命周期 - 更新之后
  updated () {},
  // 生命周期 - 销毁之前
  beforeDestroy () {},
  // 生命周期 - 销毁完成
  destroyed () {},
  // 如果页面有keep-alive缓存功能，这个函数会触发
  activated () {}
}
</script>

<style scoped>

</style>
